<template>
	<view class="container">
		<view class="wd-swiper-wrap">
			<u-swiper :list="swiperList" :autoplay="false" height="270" :border-radius="24" mode="round" indicator-pos="bottomCenter" @click="swiperClick"></u-swiper>
		</view>
		<view class="wd-flex title-wrap">
			<view class="wd-flex-cell title">全部活动</view>
			<view class="select" @click="typeToggle">
				<text>{{typeData}}</text>
				<u-icon name="arrow-down" color="#e1e1e1" size="22"></u-icon>
			</view>
			<u-action-sheet v-model="typeShow" :list="typeList" @click="typeClick"></u-action-sheet>
		</view>
		<!-- mescroll-body start -->
		<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="activity-list">
				<navigator class="activity-list__item" v-for="(item,index) in activityList" :key="index" :url="`/pages/activity/activityDetail/activityDetail?active_id=${item.id}`">
					<image class="thumb" :src="item.image_text" mode="aspectFill"></image>
					<view class="wd-flex content">
						<view class="wd-flex-cell">
							<view class="title">{{item.name}}</view>
							<view class="info">开课时间：{{item.start_time_text}}-{{item.end_time_text}}</view>
							<view class="info">限定人数：{{item.max_count}}</view>
						</view>
						<view :class="{'over': item.join_status}">
							<view class="state">{{item.active_status==1?'活动未开始':(item.active_status==2?'活动进行中':'活动已结束')}}</view>
							<view class="button">{{item.join_status?'已参加':'参加'}}</view>
						</view>
					</view>
				</navigator>
			</view>
		</mescroll-body>
		<!-- mescroll-body end -->
		<!-- 底部导航栏 start -->
		<u-tabbar class="wd-tabbar" iconSize="44" :list="wd_tabbar"></u-tabbar>
		<!-- 底部导航栏 end -->
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const app = getApp();
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '../../../../static/images/icon_empty-class.png',
						tip: '暂无最新活动哦'
					}
				},
				//轮播图
				swiperList: [],
				
				typeShow: false,
				typeData: '活动类型',
				typeList: [{ value:'0',text: '活动未开始' }, { value:'1',text: '活动进行中' }, {value:'2', text: '活动已结束' }],
				type_id:-1,
				activityList: []
			}
		},
		onLoad(){
			this.fetchBanners();
			let that = this;
			uni.$on(app.globalData.event.shopChange,function(shop){
				that.mescroll.resetUpScroll()
			})
		},
		onUnload() {
			uni.$off(app.globalData.event.shopChange,this);
		},
		onShareAppMessage() {
			let user = this.$core.getUserinfo();
			let path = "/pages/tabbar/activity/activity"
			if(user){
				path += '?pid='+user.id;
			}
			return {
				title: app.shareConfig.shareTitle,
				path: path,
				imageUrl: app.shareConfig.shareImage
			}
		},
		onShareTimeline() {
			let query = '';
			let user = this.$core.getUserinfo();
			if(user){
				query = 'pid='+user.id;
			}
			return {
				title: app.shareConfig.shareTitle,
				query: query,
			}
		},
		methods: {
			
			//获取广告图
			fetchBanners(){
				this.$core.get({url:'fitness.banner/lists',loading:false,data:{group:'active_index'},success:(ret)=>{
					 this.swiperList = ret.data;
				}});
			},
			
			typeToggle() {
				this.typeShow = !this.typeShow
			},
			typeClick(index) {
				this.typeData = this.typeList[index].text;
				this.type_id = this.typeList[index].value;
				this.mescroll.resetUpScroll()
			},
			
			/*上拉加载的回调*/
			upCallback(page) {
				var that = this;
				let shop = that.$core.getCurrentShop();
				let shopId = shop ? shop.id : 0;
				that.$core.post({url:'fitness.active/lists',data:{shop_id:shopId,state:that.type_id,page:page.num,pagesize:page.size},success:(ret)=>{
					if(page.num == 1) that.activityList = []; //如果是第一页需手动制空列表
					that.activityList = that.activityList.concat(ret.data.data); //追加新数据
					 that.mescroll.endSuccess(ret.data.data.length);
				}});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title-wrap {
		padding: 0 24rpx;
		.title {
			font-size: 32rpx;
			color: #333333;
		}
		.select {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			min-width: 220rpx;
			height: 56rpx;
			padding: 0 24rpx;
			
			&:after {
				content: ' ';
				position: absolute;
				pointer-events: none;
				box-sizing: border-box;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				left: 0;
				top: 0;
				width: 199.8%;
				height: 199.7%;
				-webkit-transform: scale(0.5, 0.5);
				transform: scale(0.5, 0.5);
				border: 1px solid #E1E1E1;
				border-radius: 99px;
				z-index: 1;
			}
			
			text {
				margin-right: 20rpx;
				font-size: 26rpx;
				color: #333333;
			}
		}
	}
	.activity-list {
		padding: 24rpx;
		
		.activity-list__item {
			display: block;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			overflow: hidden;
			.thumb {
				display: block;
				width: 100%;
				height: 230rpx;
			}
			.content {
				padding: 24rpx 30rpx;
			}
			.wd-flex-cell {
				margin-right: 20rpx;
			}
			.title {
				margin-bottom: 6rpx;
				font-size: 32rpx;
				color: #333333;
			}
			.info {
				margin-bottom: 6rpx;
				font-size: 26rpx;
				color: #999999;
			}
			.state {
				text-align: right;
				font-size: 21rpx;
				color: #6D4BBE;
			}
			
			.button {
				margin-top: 28rpx;
				width: 140rpx;
				height: 54rpx;
				background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
				border-radius: 99px;
				text-align: center;
				line-height: 54rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				
				&.active {
					background: rgba(109, 75, 190, 0.1);
					color: #6D4BBE;
				}
			}
			
			.over {
				.state {
					color: #D7D7D7;
				}
				.button {
					background: #D7D7D7;
					color: #FFFFFF;
				}
			}
		}
	}
</style>